<template>
  <div class="content">
    <div class="title">
      <van-nav-bar @click-left="clickBack" left-arrow title="搜索" />
    </div>
    <van-sticky>
      <div class="search">
        <van-search
          shape="round"
          v-model="title"
          placeholder="请输入搜索关键词"
          @input="searchKey"
        />
      </div>
    </van-sticky>

    <div class="result">搜索:共{{ articleArr.length }}条结果</div>
    <div class="main" v-if="articleArr.length !== 0">
      <div
        class="item"
        @click="$router.push({ path: '/detail', query: { id: item.id } })"
        v-for="(item, index) in articleArr"
        :key="index"
      >
        <div class="left"><img :src="urlImg(item.cover)" /></div>
        <div class="right">
          <span class="title">{{ item.title }}</span>
          <span class="p">{{ item.description }}</span>
          <div class="bottom">
            <span
              >已分享:{{
                $route.query.type == 1 ? item.shareNum || 0 : item.share || 0
              }}次</span
            >
            <span
              >{{ $route.query.type == 1 ? "分享时间" : "上传时间" }}:{{
                item.gmtCreate
              }}</span
            >
          </div>
        </div>
      </div>
    </div>
    <van-empty description="暂无数据" v-else />
  </div>
</template>

<script>
export default {
  data() {
    return {
      articleArr: [], //文章列表
      page: 1, //当前页数
      title: "",
      time: null,
      pages: "",
    };
  },

  mounted() {
    this.articleArr = [];
  },
  methods: {
    //点击返回
    clickBack() {
      this.$router.back();
    },
    //搜索
    searchKey() {
      let obj = {
        title: this.title,
        limit: 1000000000000,
        page: this.page,
        agentId: sessionStorage.getItem("agentId"),
      };
      clearTimeout(this.time);
      this.time = setTimeout(async (_) => {
        let res;
        if (this.$route.query.type == 1) {
          // 分享记录的搜索
          res = await this.$api.getShareArticleSysList(obj);
          if (res.code != 0) return;
          if (!this.articleArr) {
            return (this.articleArr = res.data.records);
          }
          this.articleArr = res.data.records;
          this.pages = res.data.pages;
        } else {
          // 文章的搜索
          res = await this.$api.getArticleSysList(obj);
          if (res.code != 0) return;
          if (!this.articleArr) {
            return (this.articleArr = res.page.records);
          }
          this.articleArr = res.page.records;
          this.pages = res.page.pages;
        }

        this.time = null;
      }, 700);
    },

    //拼接图片地址 有无http 或https
    urlImg: function (url = "") {
      // 判断如果为假 直接结束
      if (!url) return false;

      //判断是否含有http 有就不用加http 没有就加http
      let isHttp = url.slice(0, 7);
      if (isHttp == "https:/" || isHttp == "http://" || isHttp == " https:") {
        return url;
      } else {
        return "http://wx-001.unionnetwork.com/zk/" + url;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.content {
  padding: 0 15px;
  margin-bottom: 51px;
  .result {
    font-size: 11px;
    color: #999999;
  }
  .main {
    margin-top: 20px;
    .item {
      display: flex;
      margin-bottom: 24px;

      .left {
        flex: 1;
        width: 84px;
        height: 84px;
        margin-right: 15px;

        img {
          width: 84px;
          height: 84px;
        }
      }

      .right {
        flex: 3;
        span {
          font-size: 11px;
          color: #999999;
        }

        .title {
          display: block;
          font-size: 14px;
          color: #333333;
        }

        .p {
          margin-top: 3px;
          height: 30px;
          display: -webkit-box;
          overflow: hidden;
          -webkit-box-orient: vertical;
          text-overflow: ellipsis;
          -webkit-line-clamp: 2;
        }

        .bottom {
          width: 246px;
          margin-top: 8px;
          display: flex;
          justify-content: space-between;
        }
      }
    }
  }
}
</style>
